<template>
    <div class="left">
        <div class="left-top" :style="{ transform: scaleX === -1 ? 'scaleX(-1)' : 'none' }">
            <div
                :style="{ transform: scaleX === -1 ? 'scaleX(-1)' : 'none', textAlign: scaleX === -1 ? 'right' : 'left' }">
                {{ title }}</div>
        </div>
        <div class="left-bottom">
            <div ref="chartContainer" class="chart-container" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
    title: {
        type: String,
        default: '标题'
    },
    scaleX: {
        type: Number,
        default: 1
    },
    option: {
        type: Object,
        default: () => ({})
    }
});

const chartContainer = ref(null);
let chartInstance = null;

// 提取更新图表的逻辑到独立函数
const updateChart = (newOption) => {
    if (chartInstance && newOption) {
        chartInstance.setOption(newOption);
    }
};
let timer = null
onMounted(() => {
    // 初始化图表
    chartInstance = echarts.init(chartContainer.value);

    // 初始设置图表选项
    timer = setInterval(() => {
        updateChart(props.option);
    }, 1000);
    // 监听窗口大小变化，调整图表尺寸
    window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
    // 组件卸载时销毁图表实例并移除事件监听
    if (chartInstance) {
        chartInstance.dispose();
        chartInstance = null;
    }
    clearInterval(timer);
    window.removeEventListener('resize', handleResize);
});

const handleResize = () => {
    // 窗口大小变化时调整图表尺寸
    if (chartInstance) {
        chartInstance.resize();
    }
};

</script>

<style scoped>
/* 保持原有样式不变 */
.left {
    width: 100% !important;
    height: 100% !important;
    display: flex;
    flex-direction: column;
}

.left-top {
    width: 90%;
    height: 25%;
    background: url('/homePageImg/tl.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    padding: 2% 0 0 30%;
    font-size: 5px;
}

.left-bottom {
    flex: 1;
}

.chart-container {
    width: 100%;
    height: 100%;
}
</style>